<template>

  <!--首页 我的功能 自定义显示的功能 -->
  <el-dialog class="pick-dialog" append-to-body	 title="我的功能" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1200px">
    <div class="form-box">
     
      <div class="card-box">
        <div class="yitianjia" >
          <div class="header">
            <b style="color: #666;font-size: 18px;">快捷功能</b>
            <span style="color: #666;margin-left: 15px;">快捷功能会固定在首页,拖动功能可调整顺序</span>
          </div>
          <draggable class="app_box flex" style="min-height: 100px;" v-model="valueArr"  :group="{ name: 'lists', pull: 'move', put: true }"  animation="300" @end="onEnd">

            <template v-if="valueArr&&valueArr.length" >
              <template v-for="(o,i) in valueArr">
                <div v-if="o&&o.meta&&!o.hidden" :key="i" class="item_label">
                  <img :src="o.meta.iconImg||shalou" alt="">

                  <div>{{ o.meta?o.meta.title:'' }}</div>

                  <span class="removeicon el-icon-close" @click="removeItem(i)">

                  </span>
                </div>
              </template>
            </template>
            <div v-else style="width: 100%; line-height: 100px;font-size: 20px;color: #999;text-align: center;">
              暂无功能
            </div>
          </draggable>
        </div>
        <div class="weitianjia">
          <div class="header">
            <b style="color: #666;font-size: 18px;">全部功能</b>
            <span style="color: #666;margin-left: 15px;">全部功能为系统全部功能,拖动功能至上方,可设置为快捷功能</span>
          </div>
          <div class="class_box flex">
            <div class="class_item" :class="{active:activeTab==''}" @click="classClick('')">
              全部
            </div>
            <template v-for="item in routeData">
              <div @click="classClick(item)" class="class_item" :class="{active:activeTab==item.name}" v-if="item.meta&&item.children&&item.children.length&&!item.hidden" :key="item.id">
                {{ item.meta?item.meta.title:'' }}
              </div>
            </template>
          </div>
          <draggable class="app_box flex" style="min-height: 100px;" :group="{ name: 'lists', pull: 'clone', put: true }" v-model="unAddList"  animation="300"  @end="onEnd">
            <template v-if="unAddList&&unAddList.length" >
              <template v-for="(o,i) in unAddList">
                <div v-if="o&&o.meta&&!o.hidden" :key="i" class="item_label">
                  <img :src="o.meta.iconImg||shalou" alt="">

                  <div>{{ o.meta?o.meta.title:'' }}</div>
                </div>
              </template>
            </template>
            <div v-else style="width: 100%;line-height: 100px;font-size: 20px;color: #999;text-align: center;">
              暂无功能
            </div>
            
          </draggable>
        </div>

      </div>
      
     
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getuserDataUpdateList2

} from "@/api/tenantApis/indexStatistics.js";
//导入draggable组件
import draggable from "vuedraggable";
export default {
  name: "",
  components:{draggable},
  data() {
    return {
      shalou: require("../../assets/img/home2/shalou.png"),
      dialogVisible: false,
      loading: false,
      valueArr:[],
      allData:[],
      unAddList:[],
      allApps:[],
      activeTab:''
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    routeData() {
      return this.$store.state.permission.routeData;
    },
  },
  watch: {
    routeData: {
      handler(val) {
        if (val && val.length) {
          // console.log("%c Line:111 🥪 val", "color:#3f7cff", val);
          this.allApps = this.extractItemsWithoutChildren(val);
          this.unAddList = [...this.allApps]
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    open(valueArr) {
      // console.log("%c Line:35 🍞 valueArr", "color:#7f2b82", valueArr);
      this.loading = false
      this.dialogVisible = true;
      if(valueArr&&valueArr.length){
        
        this.valueArr = [...valueArr]
      }
      // this.getAllData()
    },
    // 从置顶功能中移除
    removeItem(i){
      this.valueArr.splice(i,1)
    },
    // 点击切换分类
    classClick(item){
      this.unAddList = []
      if(item){
        this.activeTab = item.name
        if(item.children&&item.children.length){
          this.unAddList = [...item.children]
        }

      }else{
        this.activeTab = ''
        this.unAddList = [...this.allApps]
      }

    },
    //我的功能 递归取出所有子菜单
    extractItemsWithoutChildren(data) {
      let result = [];

      // 递归函数
      function recurse(items, currentPath) {
        for (let item of items) {
          const itemPath = `${currentPath}${
            item.path[0] == "/" ||
            (currentPath && currentPath[currentPath.length - 1] == "/")
              ? ""
              : "/"
          }${item.path}`;
          if (!item.children || item.children.length === 0) {
            // 创建对象副本并设置path字段
            if (!item.hidden) {
              result.push({ ...item, path2: itemPath });
            }
          } else {
            recurse(item.children, itemPath);
          }
        }
      }

      // 从根数据开始递归，根级项的path以'/'开头
      recurse(data, "");

      return result;
    },
    handleChange(e){
      console.log("%c Line:44 🍯 e", "color:#ffdd4d", e);
      this.valueArr
      console.log("%c Line:46 🍣 this.valueArr", "color:#7f2b82", this.valueArr);

    },
    // 
    getAllData(){
      this.unAddList = []
      let allDataMap = {...this.commonMaps.shopDataMap}
      this.allData = Object.values(this.commonMaps.shopDataMap)
      if(this.valueArr&&this.valueArr.length){
        this.valueArr.forEach(r=>{
          if(allDataMap[r.key]){
            delete allDataMap[r.key]

          }
        })
      }
      this.unAddList = Object.values(allDataMap)
    },
    onEnd(e){
      // console.log("%c Line:204 🍿 e", "color:#4fff4B", e);
      // this.unAddList
      // console.log("%c Line:105 🍕 this.unAddList", "color:#e41a6a", this.unAddList);
      // this.valueArr
      // console.log("%c Line:107 🍿 this.valueArr", "color:#ed9ec7", this.valueArr);
      const arr = this.valueArr.reduce((acc, item) => {
            if (!acc.some(existingItem => existingItem.name === item.name)) {
                acc.push(item);
            }
            return acc;
      }, []);
      this.valueArr = [...arr]
    },
    submitForm(){
      const list = []
      if(this.valueArr.length){
        this.valueArr.forEach((item,i)=>{
          list.push({
            userId:this.userInfo.userId,
            dataKey:item.name,
            tenantId:this.userInfo.tenantId,
            sort:i,
            type:2
          })
        })
      }
      getuserDataUpdateList2(list).then(res=>{
        console.log("%c Line:137 🌰 res", "color:#ea7e5c", res);
        this.$message.success(res.msg)
        this.$emit('saveSuccess')
        this.close()

      })


    },
   
    close(formName) {
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="scss">
.center{
  margin-top: 15px;
}

.app_box{
  flex-wrap: wrap;
  margin-top: 15px;

}
.item_label{
  width: 80px;
  margin-bottom: 15px;
  // margin-right: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  img{
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .removeicon{
    position: absolute;
    top: -5px;
    right: 10px;
    display: none;
    background: rgba($color: #000000, $alpha: 0.6);
    color: #fff;
    border-radius: 50%;
  }
  &:hover{
    .removeicon{
      display: block;
      

    }
  }

}
.header{
  margin-bottom: 15px;
}


.class_box{
  
  .class_item{
    background: #F6F6FA;
    border-radius: 4px;
    padding: 3px 10px;
    margin-right: 16px;
    color: #333336;
    cursor: pointer;
    &.active{
      color: #fff;
      background-color: #6C5DD3;
    }
  }
}
</style>
